<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input placeholder="请输入活动名称" style="width: 200px" v-model="eventName" clearable></el-input>
      <el-input placeholder="请输入评委姓名" style="width: 200px" v-model="judgeName" clearable></el-input>
      <el-input placeholder="请输入选手姓名" style="width: 200px" v-model="contestantName" clearable></el-input>
      <el-button type="warning" style="margin-left: 10px">查询</el-button>
      <!-- <el-button type="primary" style="margin-left: 10px" @click="add()">新增</el-button> -->
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <!--  <el-table-column prop="id" label="评分序号" width="160" ></el-table-column> -->
        <el-table-column prop="judId" sortable label="评委序号"></el-table-column>
        <el-table-column prop="plaId" sortable label="选手序号"></el-table-column>
        <el-table-column prop="judName" label="评委姓名"></el-table-column>
        <el-table-column prop="plaName" label="选手姓名"></el-table-column>
        <el-table-column prop="recScore" label="选手分数" sortable></el-table-column>
        <el-table-column prop="ruaNumber" label="软约期数" sortable></el-table-column>
        <el-table-column prop="recDate" label="创建时间" sortable></el-table-column>
        <!--<el-table-column label="操作">
           <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
              <el-button slot="reference" type="danger" style="margin-left: 5px">删除</el-button>
            </el-popconfirm>
          </template>
</el-table-column> -->
      </el-table>
    </div>
    <div style="margin-left: 50%; margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </div>
    <!-- <div> -->
    <!-- Form -->
    <!-- <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" ref="formRef">
          <el-form-item label="评委序号" label-width="15%">
            <el-input v-model="form.judId" placeholder="请输入评委序号" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="选手序号" label-width="15%">
            <el-input v-model="form.plaId" placeholder="请输入选手序号" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="评委姓名" label-width="15%">
            <el-input v-model="form.judName" placeholder="请输入评委姓名" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="选手姓名" label-width="15%">
            <el-input v-model="form.plaName" autocomplete="off" placeholder="请输入选手姓名" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="选手分数" label-width="15%">
            <el-input v-model="form.recScore" autocomplete="off" placeholder="请输入选手分数" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="软约期数" label-width="15%">
            <el-input v-model="form.ruaNumber" autocomplete="off" placeholder="请输入软约期数" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="软约场次">
            <el-select v-model="form.ruaNumber" placeholder="请选择">
              <el-option v-for="item in stuList" :key="item.ruaName" :label="item.ruaName" :value="item.ruaName">
              </el-option>
            </el-select>
          </el-form-item> -->
    <!-- <el-form-item label="创建时间" label-width="15%">
        <el-input v-model="form.recDate" autocomplete="off" style="width: 90%"></el-input>
      </el-form-item> -->
    <!-- </el-form> -->
    <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div> -->
    <!-- </el-dialog>
    </div> -->
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Judgescore",
  data() {
    return {
      input:'',
      eventName: '',
      judgeName: '',
      contestantName: '',
      value: false,
      currentPage: 1,
      pageSize:10,
      tableData: [],
      dialogFormVisible: false,
      form: {
        judId:'',
        plaId:'',
        judName:'',
        plaName:'',
        recScore:'',
        ruaNumber:'',
        recDate:'',
      },
      total: 0, // 总条数，用于分页
      jwtToken: localStorage.getItem("user")
    }
  },
  //页面加载的时候，做一些事情，在created里面
  created() {
    this.load();
  },
  //定义一些页面上控件触发的事件调用的方法
  methods: {
    load() {
      request.get("/record/list",{page : this.currentPage, size : this.pageSize, eventName : this.eventName, judgeName : this.judgeName, contestantName : this.contestantName}).then(res => {
        if (res.code === 1) {
          res.data.sort((a, b) => new Date(b.ruaDate) - new Date(a.ruaDate));
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          this.tableData = res.data.slice(start, end);  // 根据页码和每页显示的数量动态截取数据
          this.total = res.data.length; // 计算总条数
        } else {
        }
      })
    },
    
    // add() {
    //   this.form = {} //新增数据的时候清空数据
    //   this.dialogFormVisible = true;
    // },
    // edit(obj) {
    //   this.form = obj;
    //   this.dialogFormVisible = true;
    // },
    // del(id) {
    //   request.delete(`/record/${id}`).then(res => {
    //     if (res.code === 1) {
    //       this.tableData = this.tableData.filter(item => item.id !== id);
    //       this.$message({
    //         message: '删除成功',
    //         type: 'success'
    //       });
    //       /*this.finBySearch();*/
    //     } else {
    //       this.$message({
    //         message: res.msg,
    //         type: 'error'
    //       });
    //     }
    //   })
    // },
    // submit() {
    //   if (this.form.judId === undefined || this.form.plaId === undefined || this.form.recScore === undefined) {
    //     this.$message({
    //       message: '请填写完整信息',
    //       type: 'error'
    //     });
    //     return;
    //   }
    //   request.post("/record/save", this.form).then(res => {
    //     if (res.code === 1) {
    //       this.$message({
    //         message: '操作成功',
    //         type: 'success'
    //       });
    //       this.load();
    //       this.dialogFormVisible = false;
    //     } else {
    //       this.$message({
    //         message: res.msg,
    //         type: 'error'
    //       });
    //     }
    //   })
    // },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 切换每页显示数量时，重置为第一页
      this.load();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
    formatter(row, column) {
      return row.address;
    }
  },
}
</script>
